<!-- Bread crumb is created dynamically -->
<!-- row -->
<div class="row">

    <!-- col -->
    <div class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
        <h1 class="page-title txt-color-blueDark">

            <!-- PAGE HEADER -->
            <i class="fa-fw fa fa-bar-chart-o"></i>
            Graphs
            <span>
                >
                Chart.js
            </span>
        </h1>
    </div>
    <!-- end col -->

    <!-- right side of the page with the sparkline graphs -->
    <!-- col -->
    <div class="col-xs-12 col-sm-5 col-md-5 col-lg-8">
        <!-- sparks -->
        <ul id="sparks">
            <li class="sparks-info">
                <h5> My Income <span class="txt-color-blue">$47,171</span></h5>
                <div class="sparkline txt-color-blue hidden-mobile hidden-md hidden-sm">
                    1300, 1877, 2500, 2577, 2000, 2100, 3000, 2700, 3631, 2471, 2700, 3631, 2471
                </div>
            </li>
            <li class="sparks-info">
                <h5> Site Traffic <span class="txt-color-purple"><i class="fa fa-arrow-circle-up" data-rel="bootstrap-tooltip" title="Increased"></i>&nbsp;45%</span></h5>
                <div class="sparkline txt-color-purple hidden-mobile hidden-md hidden-sm">
                    110,150,300,130,400,240,220,310,220,300, 270, 210
                </div>
            </li>
            <li class="sparks-info">
                <h5> Site Orders <span class="txt-color-greenDark"><i class="fa fa-shopping-cart"></i>&nbsp;2447</span></h5>
                <div class="sparkline txt-color-greenDark hidden-mobile hidden-md hidden-sm">
                    110,150,300,130,400,240,220,310,220,300, 270, 210
                </div>
            </li>
        </ul>
        <!-- end sparks -->
    </div>
    <!-- end col -->

</div>
<!-- end row -->

<!--
The ID "widget-grid" will start to initialize all widgets below
You do not need to use widgets if you dont want to. Simply remove
the <section></section> and you can use wells or panels instead
-->

<!-- widget grid -->
<section id="widget-grid" class="">

<!-- row -->
<div class="row">

<!-- NEW WIDGET START -->
<article class="col-xs-12 col-sm-6 col-md-6 col-lg-6">

    <!-- Widget ID (each widget will need unique ID)-->
    <div class="jarviswidget" id="wid-id-0" data-widget-colorbutton="false" data-widget-fullscreenbutton="false" data-widget-editbutton="false" data-widget-sortable="false">
        <!-- widget options:
        usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">

        data-widget-colorbutton="false"
        data-widget-editbutton="false"
        data-widget-togglebutton="false"
        data-widget-deletebutton="false"
        data-widget-fullscreenbutton="false"
        data-widget-custombutton="false"
        data-widget-collapsed="true"
        data-widget-sortable="false"

        -->
        <header>

            <h2>Line Chart </h2>

        </header>

        <!-- widget div-->
        <div>

            <!-- widget edit box -->
            <div class="jarviswidget-editbox">
                <!-- This area used as dropdown edit box -->
                <input class="form-control" type="text">
            </div>
            <!-- end widget edit box -->

            <!-- widget content -->
            <div class="widget-body">
                <!-- this is what the user will see -->
                <canvas id="lineChart" height="120"></canvas>
            </div>
            <!-- end widget content -->

        </div>
        <!-- end widget div -->

    </div>
    <!-- end widget -->

    <!-- Widget ID (each widget will need unique ID)-->
    <div class="jarviswidget" id="wid-id-1" data-widget-colorbutton="false" data-widget-fullscreenbutton="false" data-widget-editbutton="false" data-widget-sortable="false">
        <!-- widget options:
        usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">

        data-widget-colorbutton="false"
        data-widget-editbutton="false"
        data-widget-togglebutton="false"
        data-widget-deletebutton="false"
        data-widget-fullscreenbutton="false"
        data-widget-custombutton="false"
        data-widget-collapsed="true"
        data-widget-sortable="false"

        -->
        <header>

            <h2>Radar Chart </h2>

        </header>

        <!-- widget div-->
        <div>

            <!-- widget edit box -->
            <div class="jarviswidget-editbox">
                <!-- This area used as dropdown edit box -->
                <input class="form-control" type="text">
            </div>
            <!-- end widget edit box -->

            <!-- widget content -->
            <div class="widget-body">

                <!-- this is what the user will see -->
                <canvas id="radarChart" height="120"></canvas>

            </div>
            <!-- end widget content -->

        </div>
        <!-- end widget div -->

    </div>
    <!-- end widget -->

    <!-- Widget ID (each widget will need unique ID)-->
    <div class="jarviswidget" id="wid-id-3" data-widget-colorbutton="false" data-widget-fullscreenbutton="false" data-widget-editbutton="false" data-widget-sortable="false">
        <!-- widget options:
        usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">

        data-widget-colorbutton="false"
        data-widget-editbutton="false"
        data-widget-togglebutton="false"
        data-widget-deletebutton="false"
        data-widget-fullscreenbutton="false"
        data-widget-custombutton="false"
        data-widget-collapsed="true"
        data-widget-sortable="false"

        -->
        <header>

            <h2>Polar Chart </h2>

        </header>

        <!-- widget div-->
        <div>

            <!-- widget edit box -->
            <div class="jarviswidget-editbox">
                <!-- This area used as dropdown edit box -->
                <input class="form-control" type="text">
            </div>
            <!-- end widget edit box -->

            <!-- widget content -->
            <div class="widget-body">

                <!-- this is what the user will see -->
                <canvas id="polarChart" height="120"></canvas>

            </div>
            <!-- end widget content -->

        </div>
        <!-- end widget div -->

    </div>
    <!-- end widget -->

</article>
<!-- WIDGET END -->

<!-- NEW WIDGET START -->
<article class="col-xs-12 col-sm-6 col-md-6 col-lg-6">

    <!-- Widget ID (each widget will need unique ID)-->
    <div class="jarviswidget" id="wid-id-2" data-widget-colorbutton="false" data-widget-fullscreenbutton="false" data-widget-editbutton="false" data-widget-sortable="false">
        <!-- widget options:
        usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">

        data-widget-colorbutton="false"
        data-widget-editbutton="false"
        data-widget-togglebutton="false"
        data-widget-deletebutton="false"
        data-widget-fullscreenbutton="false"
        data-widget-custombutton="false"
        data-widget-collapsed="true"
        data-widget-sortable="false"

        -->
        <header>

            <h2>Bar Chart </h2>

        </header>

        <!-- widget div-->
        <div>

            <!-- widget edit box -->
            <div class="jarviswidget-editbox">
                <!-- This area used as dropdown edit box -->
                <input class="form-control" type="text">
            </div>
            <!-- end widget edit box -->

            <!-- widget content -->
            <div class="widget-body">

                <!-- this is what the user will see -->
                <canvas id="barChart" height="120"></canvas>

            </div>
            <!-- end widget content -->

        </div>
        <!-- end widget div -->

    </div>
    <!-- end widget -->

    <!-- Widget ID (each widget will need unique ID)-->
    <div class="jarviswidget" id="wid-id-4" data-widget-colorbutton="false" data-widget-fullscreenbutton="false" data-widget-editbutton="false" data-widget-sortable="false">
        <!-- widget options:
        usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">

        data-widget-colorbutton="false"
        data-widget-editbutton="false"
        data-widget-togglebutton="false"
        data-widget-deletebutton="false"
        data-widget-fullscreenbutton="false"
        data-widget-custombutton="false"
        data-widget-collapsed="true"
        data-widget-sortable="false"

        -->
        <header>

            <h2>Doughnut Chart </h2>

        </header>

        <!-- widget div-->
        <div>

            <!-- widget edit box -->
            <div class="jarviswidget-editbox">
                <!-- This area used as dropdown edit box -->
                <input class="form-control" type="text">
            </div>
            <!-- end widget edit box -->

            <!-- widget content -->
            <div class="widget-body">

                <!-- this is what the user will see -->
                <canvas id="doughnutChart" height="120"></canvas>

            </div>
            <!-- end widget content -->

        </div>
        <!-- end widget div -->

    </div>
    <!-- end widget -->

    <!-- Widget ID (each widget will need unique ID)-->
    <div class="jarviswidget" id="wid-id-6" data-widget-colorbutton="false" data-widget-fullscreenbutton="false" data-widget-editbutton="false" data-widget-sortable="false">
        <!-- widget options:
        usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">

        data-widget-colorbutton="false"
        data-widget-editbutton="false"
        data-widget-togglebutton="false"
        data-widget-deletebutton="false"
        data-widget-fullscreenbutton="false"
        data-widget-custombutton="false"
        data-widget-collapsed="true"
        data-widget-sortable="false"

        -->
        <header>

            <h2>Pie Chart </h2>

        </header>

        <!-- widget div-->
        <div>

            <!-- widget edit box -->
            <div class="jarviswidget-editbox">
                <!-- This area used as dropdown edit box -->
                <input class="form-control" type="text">
            </div>
            <!-- end widget edit box -->

            <!-- widget content -->
            <div class="widget-body">

                <!-- this is what the user will see -->
                <canvas id="pieChart" height="120"></canvas>

            </div>
            <!-- end widget content -->

        </div>
        <!-- end widget div -->

    </div>
    <!-- end widget -->

</article>
<!-- WIDGET END -->

</div>

<!-- end row -->

<!-- row -->

<div class="row">

    <!-- a blank row to get started -->
    <div class="col-sm-12">
        <!-- your contents here -->
    </div>

</div>

<!-- end row -->

</section>
<!-- end widget grid -->
@section Scripts {
    <script type="text/javascript">

        /* DO NOT REMOVE : GLOBAL FUNCTIONS!
	 *
	 * pageSetUp(); WILL CALL THE FOLLOWING FUNCTIONS
	 *
	 * // activate tooltips
	 * $("[rel=tooltip]").tooltip();
	 *
	 * // activate popovers
	 * $("[rel=popover]").popover();
	 *
	 * // activate popovers with hover states
	 * $("[rel=popover-hover]").popover({ trigger: "hover" });
	 *
	 * // activate inline charts
	 * runAllCharts();
	 *
	 * // setup widgets
	 * setup_widgets_desktop();
	 *
	 * // run form elements
	 * runAllForms();
	 *
	 ********************************
	 *
	 * pageSetUp() is needed whenever you load a page.
	 * It initializes and checks for all basic elements of the page
	 * and makes rendering easier.
	 *
	 */

        pageSetUp();

        /*
         * ALL PAGE RELATED SCRIPTS CAN GO BELOW HERE
         * eg alert("my home function");
         * 
         * var pagefunction = function() {
         *   ...
         * }
         * loadScript("/js/plugin/_PLUGIN_NAME_.js", pagefunction);
         * 
         * TO LOAD A SCRIPT:
         * var pagefunction = function (){ 
         *  loadScript(".../plugin.js", run_after_loaded);	
         * }
         * 
         * OR you can load chain scripts by doing
         * 
         * loadScript(".../plugin.js", function(){
         * 	 loadScript("../plugin.js", function(){
         * 	   ...
         *   })
         * });
         */

        var LineConfig, barChartData, RadarConfig, DoughtnutConfig, PolarConfig, PieConfig;

        // pagefunction

        var pagefunction = function() {
            // clears the variable if left blank


            // reference: http://www.chartjs.org/docs/
            var randomScalingFactor = function() {
                return Math.round(Math.random() * 100);
                //return 0;
            };
            var randomColorFactor = function() {
                return Math.round(Math.random() * 255);
            };
            var randomColor = function(opacity) {
                return 'rgba(' +
                    randomColorFactor() +
                    ',' +
                    randomColorFactor() +
                    ',' +
                    randomColorFactor() +
                    ',' +
                    (opacity || '.3') +
                    ')';
            };


            LineConfig = {
                type: 'line',
                data: {
                    labels: ["January", "February", "March", "April", "May", "June", "July"],
                    datasets: [
                        {
                            label: "My First dataset",
                            data: [
                                randomScalingFactor(), randomScalingFactor(), randomScalingFactor(),
                                randomScalingFactor(), randomScalingFactor(), randomScalingFactor(),
                                randomScalingFactor()
                            ],

                        }, {
                            label: "My Second dataset",
                            data: [
                                randomScalingFactor(), randomScalingFactor(), randomScalingFactor(),
                                randomScalingFactor(), randomScalingFactor(), randomScalingFactor(),
                                randomScalingFactor()
                            ],
                        }
                    ]
                },
                options: {
                    responsive: true,
                    tooltips: {
                        mode: 'label'
                    },
                    hover: {
                        mode: 'dataset'
                    },
                    scales: {
                        xAxes: [
                            {
                                display: true,
                                scaleLabel: {
                                    show: true,
                                    labelString: 'Month'
                                }
                            }
                        ],
                        yAxes: [
                            {
                                display: true,
                                scaleLabel: {
                                    show: true,
                                    labelString: 'Value'
                                },
                                ticks: {
                                    suggestedMin: 0,
                                    suggestedMax: 100,
                                }
                            }
                        ]
                    }
                }
            };
            $.each(LineConfig.data.datasets,
                function(i, dataset) {
                    dataset.borderColor = 'rgba(0,0,0,0.15)';
                    dataset.backgroundColor = randomColor(0.5);
                    dataset.pointBorderColor = 'rgba(0,0,0,0.15)';
                    dataset.pointBackgroundColor = randomColor(0.5);
                    dataset.pointBorderWidth = 1;
                });


            // bar chart example


            barChartData = {
                labels: ["January", "February", "March", "April", "May", "June", "July"],
                datasets: [
                    {
                        label: 'Dataset 1',
                        backgroundColor: "rgba(220,220,220,0.5)",
                        data: [
                            randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(),
                            randomScalingFactor(), randomScalingFactor(), randomScalingFactor()
                        ]
                    }, {
                        label: 'Dataset 2',
                        backgroundColor: "rgba(151,187,205,0.5)",
                        data: [
                            randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(),
                            randomScalingFactor(), randomScalingFactor(), randomScalingFactor()
                        ]
                    }, {
                        label: 'Dataset 3',
                        backgroundColor: "rgba(151,187,205,0.5)",
                        data: [
                            randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(),
                            randomScalingFactor(), randomScalingFactor(), randomScalingFactor()
                        ]
                    }
                ]

            };


            // radar example


            RadarConfig = {
                type: 'radar',
                data: {
                    labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
                    datasets: [
                        {
                            label: "My First dataset",
                            backgroundColor: "rgba(220,220,220,0.2)",
                            pointBackgroundColor: "rgba(220,220,220,1)",
                            data: [
                                randomScalingFactor(), randomScalingFactor(), randomScalingFactor(),
                                randomScalingFactor(), randomScalingFactor(), randomScalingFactor(),
                                randomScalingFactor()
                            ]
                        }, {
                            label: "My Second dataset",
                            backgroundColor: "rgba(151,187,205,0.2)",
                            pointBackgroundColor: "rgba(151,187,205,1)",
                            hoverPointBackgroundColor: "#fff",
                            pointHighlightStroke: "rgba(151,187,205,1)",
                            data: [
                                randomScalingFactor(), randomScalingFactor(), randomScalingFactor(),
                                randomScalingFactor(), randomScalingFactor(), randomScalingFactor(),
                                randomScalingFactor()
                            ]
                        },
                    ]
                },
                options: {
                    legend: {
                        position: 'top',
                    },

                    scale: {
                        reverse: false,
                        ticks: {
                            beginAtZero: true
                        }
                    }
                }
            };


            // doughnut example

            DoughtnutConfig = {
                type: 'doughnut',
                data: {
                    datasets: [
                        {
                            data: [
                                randomScalingFactor(),
                                randomScalingFactor(),
                                randomScalingFactor(),
                                randomScalingFactor(),
                                randomScalingFactor(),
                            ],
                            backgroundColor: [
                                "#F7464A",
                                "#46BFBD",
                                "#FDB45C",
                                "#949FB1",
                                "#4D5360",
                            ],
                            label: 'Dataset 1'
                        }
                    ],
                    labels: [
                        "Red",
                        "Green",
                        "Yellow",
                        "Grey",
                        "Dark Grey"
                    ]
                },
                options: {
                    responsive: true,
                    legend: {
                        position: 'top',
                    }
                }
            };


            // polar chart example 


            PolarConfig = {
                data: {
                    datasets: [
                        {
                            data: [
                                randomScalingFactor(),
                                randomScalingFactor(),
                                randomScalingFactor(),
                                randomScalingFactor(),
                                randomScalingFactor(),
                            ],
                            backgroundColor: [
                                "#F7464A",
                                "#46BFBD",
                                "#FDB45C",
                                "#949FB1",
                                "#4D5360",
                            ],
                            label: 'My dataset' // for legend
                        }
                    ],
                    labels: [
                        "Red",
                        "Green",
                        "Yellow",
                        "Grey",
                        "Dark Grey"
                    ]
                },
                options: {
                    responsive: true,
                    legend: {
                        position: 'top',
                    },
                    title: {
                        display: true,
                        text: 'Our Favorite Dataset'
                    },
                    scale: {
                        ticks: {
                            beginAtZero: true
                        },
                        reverse: false
                    },
                    animateRotate: false
                }
            };


            // pie chart example
            PieConfig = {
                type: 'pie',
                data: {
                    datasets: [
                        {
                            data: [
                                randomScalingFactor(),
                                randomScalingFactor(),
                                randomScalingFactor(),
                                randomScalingFactor(),
                                randomScalingFactor(),
                            ],
                            backgroundColor: [
                                "#F7464A",
                                "#46BFBD",
                                "#FDB45C",
                                "#949FB1",
                                "#4D5360",
                            ],
                        }
                    ],
                    labels: [
                        "Red",
                        "Green",
                        "Yellow",
                        "Grey",
                        "Dark Grey"
                    ]
                },
                options: {
                    responsive: true
                }
            };


            myLine = new Chart(document.getElementById("lineChart"), LineConfig);
            myBar = new Chart(document.getElementById("barChart"),
                {
                    type: 'bar',
                    data: barChartData,
                    options: {
                        responsive: true,
                    }
                });
            myRadar = new Chart(document.getElementById("radarChart"), RadarConfig);
            myDoughnut = new Chart(document.getElementById("doughnutChart"), DoughtnutConfig);
            myPolarArea = Chart.PolarArea(document.getElementById("polarChart"), PolarConfig);
            myPie = new Chart(document.getElementById("pieChart"), PieConfig);


        };

        loadScript("/js/plugin/moment/moment.min.js",
            function() {
                loadScript("/js/plugin/chartjs/chart.min.js", pagefunction);
            });

        // end pagefunction

        // destroy generated instances 
        // pagedestroy is called automatically before loading a new page
        // only usable in AJAX version!

        var pagedestroy = function() {

            //destroy all charts
            myLine.destroy();
            LineConfig = null;

            myBar.destroy();
            barChartData = null;

            myRadar.destroy();
            RadarConfig = null;

            myDoughnut.destroy();
            DoughtnutConfig = null;

            myPolarArea.destroy();
            PolarConfig = null;

            myPie.destroy();
            PieConfig = null;

            if (debugState) {
                root.console.log("✔ Chart.js charts destroyed");
            }
        };

        // end destroy

    </script>
}
